<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="500px"
    @close="close"
  >
    <el-form ref="formRef" label-width="80px" :model="form" :rules="rules">
      <el-form-item v-if="!moreid" label="商机名称" prop="BusinessOrderName">
        <el-input v-model="form.BusinessOrderName" disabled />
      </el-form-item>
      <el-form-item v-if="!moreid" label="客户名称" prop="CustomerAllName">
        <el-input v-model="form.CustomerAllName" disabled />
      </el-form-item>
      <el-form-item
        v-if="!moreid && queryForm.tab != 'recommend'"
        label="跟进人"
        prop="SaleStaffName"
      >
        <el-input v-model="form.SaleStaffName" disabled />
      </el-form-item>
      <el-form-item v-if="!moreid" label="创建时间" prop="addTime">
        <el-input v-model="form.addTime" disabled />
      </el-form-item>
      <el-form-item label="所属组织" prop="TaskCompany">
        <el-cascader
          v-model="form.TaskCompany"
          :options="organizationList"
          :props="companyProps"
          style="width: 100%"
          @change="getDeptment"
        />
      </el-form-item>
      <el-form-item label="所属部门" prop="TaskDeptment">
        <el-cascader
          v-model="form.TaskDeptment"
          :options="departmentList"
          :props="deptmentProps"
          style="width: 100%"
          @change="getStaffPost"
        />
      </el-form-item>
      <el-form-item label="调配员工" prop="ChangeSaleStaff">
        <el-select v-model="form.ChangeSaleStaff" @change="getStaffList">
          <el-option
            v-for="item in staffList"
            :key="item.StaffID"
            :label="item.StaffName"
            :value="item.StaffID"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确定调配</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import {
    OperateCompanySelect,
    getDeptmentSelect,
    GetStaffSelect,
  } from '@/api/common'

  import { changeSaleStaff } from '@/api/businessOrder'

  export default defineComponent({
    name: 'BusinessAllEdit',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        moreid: 0,
        moreids: [],
        queryForm: {},
        companyProps: {
          expandTrigger: 'hover',
        },
        deptmentProps: {
          expandTrigger: 'hover',
        },
        getStaffParams: [],
        organizationList: [],
        staffList: [],
        departmentList: [],
        formRef: null,
        form: {
          roles: [],
        },
        rules: {
          ChangeSaleStaff: [
            { required: true, trigger: 'blur', message: '请选择调配员工' },
          ],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row, queryForm, moreid) => {
        state.moreid = moreid
        if (moreid) {
          state.title = '商机调配'
          state.moreids = row
        } else {
          state.title = '商机调配'
          state.form = Object.assign({}, row)
          state.queryForm = queryForm
        }
        getOrganization()
        state.dialogFormVisible = true
      }
      const close = () => {
        state['formRef'].resetFields()
        state.form = {}
        state.departmentList = []
        state.organizationList = []
        state.staffList = []
        state.dialogFormVisible = false
      }
      const save = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            let OrderIDs = state.form.OrderID
            if (state.moreid) {
              OrderIDs = state.moreids
            }
            const changForm = {
              MoreID: state.moreid,
              OrderID: OrderIDs,
              ChangeSaleStaff: state.form.ChangeSaleStaff,
            }

            const { msg } = await changeSaleStaff(changForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      // 获取运营组织
      const getOrganization = async () => {
        const { data } = await OperateCompanySelect()
        console.log(data, '获取组织')
        state.organizationList = data.CompanyOptions
      }
      // 获取部门
      const getDeptment = async () => {
        const dataMsg = {
          Company: state.form.TaskCompany[state.form.TaskCompany.length - 1],
        }
        const { data } = await getDeptmentSelect(dataMsg)
        state.departmentList = data.DeptmentOptions
        console.log(state.departmentList, '选择组织时')
        if (state.form.TaskDeptment) {
          getStaffPost()
        }
      }
      // 获取员工
      const getStaffPost = async () => {
        let dataMsg = {}
        if (typeof state.getStaffParams == 'string') {
          dataMsg = {
            Deptment: [state.form.TaskDeptment],
            StaffPostID: JSON.parse(state.getStaffParams),
          }
        } else {
          dataMsg = {
            Deptment: [state.form.TaskDeptment],
            StaffPostID: state.getStaffParams,
          }
        }

        const { data } = await GetStaffSelect(dataMsg)
        state.staffList = data.StaffPostOptions
        state.form.ChangeSaleStaff = null
        console.log(state.staffList, '选择部门时')
      }

      return {
        ...toRefs(state),
        getStaffPost,
        getDeptment,
        showEdit,
        getOrganization,
        close,
        save,
      }
    },
  })
</script>
